<template>
	<view class="module-page">
		<!-- 头部区域 -->
		<page-header class="header" title="功能中心" :showBack="false" @heightChange="handleHeaderHeightChange">
		</page-header>

		<!-- 功能分类区域 -->
		<view class="module-content">
			<view class="module-category" v-for="(category, categoryIndex) in moduleData" :key="categoryIndex">
				<view class="category-header">
					<view class="category-title">
						<uni-icons :type="category.icon || 'grid'" size="18" color="#666"></uni-icons>
						<view class="title-text">{{ category.name }}</view>
					</view>
				</view>
				<view class="category-content">
					<view class="module-grid">
						<view class="module-item" v-for="(module, moduleIndex) in category.modules" :key="moduleIndex"
							@click="handleModuleClick(module)">
							<view class="module-icon">
								<uni-icons :type="module.icon || 'help'" size="28" color="#007AFF"></uni-icons>
							</view>
							<view class="module-name">{{ module.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载框 -->
		<uni-popup ref="loadingPopup" type="center" :mask-click="false">
			<view class="loading-content">
				<image class="loading-image" src="/static/logo.png" mode="aspectFit" />
				<view class="loading-text">{{ loadingText }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick } from 'vue';
// 移除PageBottom相关import
import PageHeader from '@/components/PageHeader.vue';
import { generateFilePath } from '@/library/tool.js';

export default defineComponent({
	name: 'Module',
	components: {
		// 移除PageBottom
		PageHeader
	},
	setup(props, { emit }) {
		// ===== 变量声明 =====
		const loadingText = ref('加载中...');
		const currentPageUrl = ref('/pages/Module');
		const loadingPopup = ref(null);

		// 头部高度相关
		const headerHeight = ref(0); // 头部总高度（px）
		const statusBarHeight = ref(20); // 状态栏高度（px）
		const navBarHeight = ref(44); // 导航栏高度（px）

		// 功能模块数据（模拟后台返回）
		const moduleData = ref([]);

		// ===== 页面交互方法 =====
		// 模块点击处理
		const handleModuleClick = (module) => {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
			return;
			// 后面根据情况大致有以下几种情况
			// 1. 自身小程序内部页面跳转
			// 2. 跳转其他小程序或者小游戏
			// 3. 其他情况

			uni.navigateTo({
				url: module.url,
				success: () => {
					console.log('跳转到:', module.url);
				},
				fail: (err) => {
					console.error('跳转失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		};

		// 头部高度变化处理
		const handleHeaderHeightChange = (heightInfo) => {
			statusBarHeight.value = heightInfo.statusBarHeight || 20;
			navBarHeight.value = heightInfo.navBarHeight || 44;
			headerHeight.value = heightInfo.totalHeaderHeight || (statusBarHeight.value + navBarHeight.value);

			console.log('头部高度更新:', heightInfo, '总高度px:', headerHeight.value);
		};



		// ===== 数据加载方法 =====
		// 直接初始化功能模块数据
		const initModuleData = () => {
			// 固定数据，不模拟加载
			const fixedData = [
				{
					id: 1,
					name: '常用功能',
					icon: 'star-filled',
					description: '日常使用频率较高的功能',
					visible: true,
					modules: [
						{
							id: 101,
							name: '投票活动',
							icon: 'checkbox-filled',
							description: '参与各种投票活动，表达你的观点',
							url: '/pages-vote/vote/VoteList',
							visible: true
						},
						{
							id: 102,
							name: '答题抽奖',
							icon: 'gift',
							description: '参与答题活动，赢取奖品',
							url: '/pages-exam/ExamList',
							visible: true
						},
						{
							id: 103,
							name: '作品展示',
							icon: 'star',
							description: '展示和浏览各类作品',
							url: '/pages-vote/entry/EntryList',
							visible: true
						},
						{
							id: 104,
							name: '个人中心',
							icon: 'person',
							description: '个人资料和账户管理',
							url: '/pages/Personal',
							visible: true
						}
					]
				},
				{
					id: 2,
					name: '休闲一刻',
					icon: 'heart',
					description: '放松心情，享受生活',
					visible: true,
					modules: [
						{
							id: 201,
							name: '解梦大全',
							icon: 'moon',
							description: '解析梦境含义，探索潜意识',
							url: '/pages-lottery/DreamAnalysis',
							visible: true
						},
						{
							id: 202,
							name: '歇后语',
							icon: 'chat',
							description: '经典歇后语，智慧结晶',
							url: '/pages-lottery/Xiehouyu',
							visible: true
						},
						{
							id: 203,
							name: '小故事',
							icon: 'book',
							description: '精选小故事，温暖心灵',
							url: '/pages-lottery/ShortStories',
							visible: true
						},
						{
							id: 204,
							name: '笑话大全',
							icon: 'smile',
							description: '开心一笑，快乐每一天',
							url: '/pages-lottery/Jokes',
							visible: true
						}
					]
				},
				{
					id: 3,
					name: '办公工具',
					icon: 'gear',
					description: '提高工作效率的实用工具',
					visible: true,
					modules: [
						{
							id: 301,
							name: '文档转换',
							icon: 'paperplane',
							description: 'PDF、Word、Excel格式转换',
							url: '/pages-form/DocumentConverter',
							visible: true
						},
						{
							id: 302,
							name: '图片转换',
							icon: 'image',
							description: '图片格式转换和压缩',
							url: '/pages-form/ImageConverter',
							visible: true
						},
						{
							id: 303,
							name: '二维码生成',
							icon: 'scan',
							description: '生成和识别二维码',
							url: '/pages-form/QRCode',
							visible: true
						},
						{
							id: 304,
							name: '计算器',
							icon: 'calculator',
							description: '多功能计算器',
							url: '/pages-form/Calculator',
							visible: true
						},
						{
							id: 305,
							name: '便签笔记',
							icon: 'compose',
							description: '快速记录想法和待办',
							url: '/pages/NoteList',
							visible: true
						}
					]
				},
				{
					id: 4,
					name: '娱乐小游戏',
					icon: 'game',
					description: '轻松娱乐，放松心情',
					visible: true,
					modules: [
						{
							id: 401,
							name: '2048',
							icon: 'grid',
							description: '经典数字益智游戏',
							url: '/pages-card/Game2048',
							visible: true
						},
						{
							id: 402,
							name: '贪吃蛇',
							icon: 'circle',
							description: '经典贪吃蛇游戏',
							url: '/pages-card/SnakeGame',
							visible: true
						},
						{
							id: 403,
							name: '俄罗斯方块',
							icon: 'square',
							description: '经典俄罗斯方块',
							url: '/pages-card/Tetris',
							visible: true
						},
						{
							id: 404,
							name: '扫雷',
							icon: 'flag',
							description: '经典扫雷游戏',
							url: '/pages-card/Minesweeper',
							visible: true
						},
						{
							id: 405,
							name: '五子棋',
							icon: 'circle-filled',
							description: '经典五子棋对战',
							url: '/pages-card/Gomoku',
							visible: true
						}
					]
				},
				{
					id: 5,
					name: '生活服务',
					icon: 'home',
					description: '日常生活便利服务',
					visible: true,
					modules: [
						{
							id: 501,
							name: '天气查询',
							icon: 'sun',
							description: '实时天气信息查询',
							url: '/pages-form/Weather',
							visible: true
						},
						{
							id: 502,
							name: '公交查询',
							icon: 'car',
							description: '公交车路线查询',
							url: '/pages-form/BusQuery',
							visible: true
						},
						{
							id: 503,
							name: '快递查询',
							icon: 'paperplane-filled',
							description: '快递物流信息查询',
							url: '/pages-form/Express',
							visible: true
						},
						{
							id: 504,
							name: '翻译工具',
							icon: 'chat-filled',
							description: '多语言翻译服务',
							url: '/pages-form/Translator',
							visible: true
						}
					]
				},
				{
					id: 6,
					name: '管理工具',
					icon: 'staff',
					description: '管理员专用功能',
					visible: false, // 后台控制显示
					modules: [
						{
							id: 601,
							name: '用户管理',
							icon: 'person-filled',
							description: '管理系统用户',
							url: '/pages-admin/user/list',
							visible: true
						},
						{
							id: 602,
							name: '内容审核',
							icon: 'checkmarkempty',
							description: '审核用户上传的内容',
							url: '/pages-admin/content/review',
							visible: true
						},
						{
							id: 603,
							name: '数据统计',
							icon: 'chart',
							description: '查看系统数据统计',
							url: '/pages-admin/stats/index',
							visible: true
						}
					]
				}
			];
			moduleData.value = fixedData;
			console.log('数据初始化完成，moduleData:', moduleData.value);
		};

		// ===== 生命周期钩子 =====
		onMounted(() => {
			// 直接初始化数据
			initModuleData();
			console.log('module onMounted...');
			        console.log('generateFilePath function');
        const fileInfo = generateFilePath({
            fileName: 'test.txt',
            fileType: 'txt',
            moduleType: 'user'
        });
			console.log('fileInfo', fileInfo);
		});

		return {
			// 变量
			loadingText,
			currentPageUrl,
			moduleData,
			loadingPopup,
			headerHeight,
			statusBarHeight,
			navBarHeight,

			// 方法
			handleModuleClick,
			handleHeaderHeightChange,
			initModuleData
		};
	}
});
</script>

<style lang="less" scoped>
.module-page {
	width: 100vw;
	min-height: calc(100vh - v-bind('headerHeight + "px"'));
	background-color: #f5f5f5;
	padding-top: v-bind('headerHeight + "px"'); // 动态头部高度

	// 功能中心内容区域
	.module-content {
		padding: 20rpx;

		.module-category {
			margin-bottom: 30rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

			.category-header {
				padding: 24rpx 24rpx 16rpx;

				.category-title {
					display: flex;
					align-items: center;

					.title-text {
						font-size: 36rpx;
						font-weight: 600;
						color: #333333;
						margin-left: 28rpx;
					}
				}
			}

			.category-content {
				margin-top: 20rpx;

				.module-grid {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 12rpx;

					.module-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 12rpx 8rpx;
						border-radius: 8rpx;
						transition: all 0.2s;

						&:active {
							background-color: #f5f5f5;
							transform: scale(0.95);
						}

						.module-icon {
							width: 80rpx;
							height: 80rpx;
							border-radius: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background: linear-gradient(135deg, #e64a4a 0%, #e69e05 100%);
							margin-bottom: 20rpx;
							box-shadow: 0 4rpx 12rpx rgba(255, 60, 86, 0.3);

							:deep(.uni-icons) {
								color: #ffffff !important;
							}
						}

						.module-name {
							font-size: 28rpx;
							color: #333333;
							font-weight: 500;
							text-align: center;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}

	// 加载框样式
	.loading-content {
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 16rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 200rpx;

		.loading-image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
			animation: rotate 1s linear infinite;
		}

		.loading-text {
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
}
</style>
